<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>历史对局库</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.css" rel="stylesheet">
    <style>
        html {
            background-color: #202020;
            width: 100%;
            min-width: 1400px;
            min-height: 730px;
            height: 100%;
            user-select: none;
        }
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
        }

        .background-pattern {
            position: fixed;
            z-index: -1;
            top: -1030px;
            left: -390px;
            opacity: 0.06;
            font-size: 50px;
            white-space: nowrap;
            line-height: 115px;
            filter: grayscale() drop-shadow(black 0px 0px 4px);
            transform-origin: center center;
            transform: rotate(45deg);
        }

        div.header-menu {
            display: flex;
            justify-content: right;
            align-items: center;
            left: 0px;
            width: 100%;
            height: 70px;
            background: linear-gradient(#000B, #0000);
            position: fixed;
            top: 0px;
            z-index: 1;
        }
        .header-menu-item {
            filter: drop-shadow(#FFFA 0px 0px 7px);
            text-decoration: none;
            margin: 10px 30px 0px 10px;
            color: #FFF8;
            font-size: 25px;
            font-family: "Segoe MDL2 Assets";
            cursor: pointer;
        }

        .games-explorer {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .explorer-page-display {
            height: 60px;
            font-size: 60px;
            font-weight: bold;
            font-family: Impact;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 50px;
        }
        .explorer-current-page {
            text-align: right;
            font-family: Impact;
            font-size: 60px;
            font-weight: bold;
            color: #EEE;
            width: 150px;
            overflow: visible;
            background: none;
            outline: none;
            border: none;
            transform-origin: right;
            filter: drop-shadow(#FFF4 0px 0px 8px);
        }
        .explorer-current-page:hover, .explorer-current-page:active { text-decoration: underline; }
        .page-box-bouncing { animation: page-box-bounce 0.2s ease-in-out; }
        @keyframes page-box-bounce {
            0% { transform: scale(1, 1); }
            50% { transform: scale(1.2, 1.2); }
            100% { transform: scale(1, 1); }
        }
        .explorer-total-page {
            color: #555;
            width: 180px;
            filter: drop-shadow(#5554 0px 0px 8px);
        }

        .explorer-control-panel {
            height: 60px;
            width: calc(100% - 400px);
            box-sizing: border-box;
            padding-left: 8px;
            background-color: #333;
            border: #555 1px solid;
            border-radius: 10px;
            margin: 10px 0px 25px 0px;
            filter: drop-shadow(#0004 0px 0px 8px);
            display: flex;
            align-items: center;
        }
        .controller-text {
            color: #888;
            margin: 0px 5px 0px -5px;
            font-size: 20px;
        }
        .controller-input {
            font-family: inherit;
            /* margin-right: 18px;
            width: 210px; */
            margin-right: 13px;
            color: #999;
            background-color: #444;
            outline: none;
            border: #666 1px solid;
            border-radius: 8px;
            height: 35px;
            padding-left: 10px;
            filter: drop-shadow(#0004 0px 0px 5px);
        }
        .text-input {
            color: #999;
            border: #555 1px solid;
            background-color: #282828;
            box-shadow: inset #0004 0px 0px 15px;
            outline: none;
            filter: none;
        }
        input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }
        input[type="number"] {
            appearance: none;
            -moz-appearance: textfield;
        }
        input[type="date"]::-webkit-calendar-picker-indicator {
            position: relative;
            right: 10px;
            color: white;
            filter: invert() brightness(0.7);
        }
        .search-button {
            box-sizing: border-box;
            padding: 5px 7px;
        }
        .search-button:hover { background-color: #666; }
        .search-button:active { background-color: #383838; }

        .explorer-content {
            overflow-x: hidden;
            height: calc(100% - 70px - 120px);
            display: flex;
            flex-direction: row;
            margin-bottom: 30px;
        }
        .page-flip-button {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #EEE;
            font-size: 100px;
            width: 200px;
            height: 100%;
            filter: drop-shadow(#EEE8 0px 0px 10px);
            cursor: pointer;
            z-index: 1;
        }

        .games-grid {
            display: grid;
            width: calc(100% - 400px);
            gap: 20px;
            grid-template-rows: auto auto auto auto;
            grid-template-columns: auto auto auto auto auto;
        }
        .games-grid-sliding-left { animation: games-card-slide-left 0.25s ease-in forwards; }
        @keyframes games-card-slide-left { 100% { transform: translate(-150%, 0px); } }
        .games-grid-sliding-right { animation: games-card-slide-right 0.25s ease-in forwards; }
        @keyframes games-card-slide-right { 100% { transform: translate(150%, 0px); } }
        .games-grid-sliding-from-left { animation: games-card-slide-from-left 0.4s ease-out forwards; }
        @keyframes games-card-slide-from-left {
            0% { transform: translate(-150%, 0px); }
            100% { transform: translate(0px, 0px); }
        }
        .games-grid-sliding-from-right { animation: games-card-slide-from-right 0.4s ease-out forwards; }
        @keyframes games-card-slide-from-right {
            0% { transform: translate(150%, 0px); }
            100% { transform: translate(0px, 0px); }
        }

        .game-card {
            cursor: pointer;
            background-color: #333;
            background-color: #2B2B2B;
            border: #555 1px solid;
            border-radius: 10px;
            box-sizing: border-box;
            padding: 10px;
            overflow: hidden;
            filter: drop-shadow(#000A 0px 0px 8px);
            display: flex;
            animation: game-card-reveal 0.15s linear;
        }
        @keyframes game-card-reveal {
            0% { filter: brightness(1.6); }
            100% { filter: brightness(1); }
        }
        .chessboard-icon {
            color: #555;
            filter: drop-shadow(#000A 0px 0px 6px);
            margin: -3px 10px -3px 0px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .game-winner {
            color: #999;
            font-weight: bold;
            max-width: 70px;
            font-size: 14px;
            margin-top: 4px;
            filter: drop-shadow(#999C 0px 0px 6px);
        }
        .game-winner-large {
            color: #777;
            font-weight: bold;
            font-size: 40px;
            margin-top: -79px;
            filter: drop-shadow(#000A 0px 0px 5px);
        }
        .game-winner-black {
            color: #000;
            filter: drop-shadow(#FFF 0px 0px 10px);
        }
        .game-winner-white {
            color: #DDD;
            filter: drop-shadow(#000 0px 0px 10px);
        }
        .game-infos {
            filter: grayscale();
            font-size: 12px;
            color: #777;
        }
        .game-info {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="background-pattern">
    <script>
        for (let i = 0; i < 29; ++i) {
            for (let j = 0; j < 22; ++j) {
                let Rand = Math.random();
                if (Rand < 0.25)
                    document.write("❤　");
                else if (Rand < 0.75)
                    document.write("🚴‍♀️　");
                else
                    document.write("🥘　");
            }
            document.write("<br/>");
        }
    </script>
</div>

<div class="header-menu">
    <a href="main_page.html" class="header-menu-item" title="返回到开始界面" id="ReturnButton"><i class='fa-solid fa-reply fa-lg' style='color: white'></i></a>
    <a class="header-menu-item" title="只看自己" id="SelfOnlyButton"><i class='fa-solid fa-users-slash fa-lg' style='color: white'></i></a>
    <a class="header-menu-item" title="个人主页" id="UserButton"><i class='fa-solid fa-user fa-lg' style='color: white'></i></a>
</div>

<div class="games-explorer">
    <div class="explorer-page-display">
        <input type="number" class="explorer-current-page page-box-bouncing" id="CurrentPageBox" placeholder="1" value="1"/>
        <div class="explorer-total-page" id="TotalPageLabel">/1</div>
    </div>
    <div class="explorer-control-panel">
        <input class="controller-input text-input" id="EmailBox" type="input" placeholder="筛选用户邮箱"/>
        <div class="controller-text">从</div>
        <input class="controller-input date-input" id="BeginDate" type="date" value="2002-10-10"/>
        <div class="controller-text">至</div>
        <input class="controller-input date-input" id="EndDate" type="date" value="2050-12-31"/>
        <div class="controller-input search-button" id="SearchButton"><i class="fa-solid fa-magnifying-glass fa-lg"></i></div>
    </div>
    <div class="explorer-content">
        <div class="page-flip-button page-up-button fa-solid fa-angle-left fa-lg"></div>
        <div class="games-grid">
            <script>
                for (let i = 0; i < 20; ++i)
                    document.write(`
								<div class="game-card" style="visibility: hidden; grid-row: ${Math.floor(i / 5)}; grid-column: ${Math.floor(i % 5)};">
									<div class="chessboard-icon fa-solid fa-chess-board fa-5x">
										<div class="game-info game-winner">♥ 100</div>
										<div class="game-info game-winner-large game-winner-black">⚫</div>
									</div>
									<div class="game-infos">
										<div class="game-info" title="对局日期">📆 2023-07-04</div>
										<div class="game-info" title="对局时间">🕒 13:57~14:02</div>
										<div class="game-info" title="黑方玩家">🟤 Redstone Heart</div>
										<div class="game-info" title="白方玩家">⚪ Redstone Heart</div>
										<div class="game-info" title="落子步数">🔄 共20步</div>
									</div>
								</div>
							`);
            </script>
        </div>
        <div class="page-flip-button page-down-button fa-solid fa-angle-right fa-lg"></div>
    </div>
</div>

<script>
    // EndDate.valueAsDate = new Date();

    function FormatDate(date) {
        let Year = date.getFullYear();
        let Month = (date.getMonth() < 9 ? "0" : "") + (date.getMonth() + 1);
        let Date = (date.getDate() < 10 ? "0" : "") + date.getDate();
        let Hours = (date.getHours() < 10 ? "0" : "") + date.getHours();
        let Minutes = (date.getMinutes() < 10 ? "0" : "") + date.getMinutes();
        return `${Year}-${Month}-${Date} ${Hours}:${Minutes}`;
    }

    function GetMaxPagesCount() { return parseInt(TotalPageLabel.innerHTML.slice(1)); }
    function SetMaxPagesCount(count) { TotalPageLabel.innerHTML = "/" + count; }
    function UpdateTotalPagesCount(callback = () => {}) {
        $.post("/Gomokult_war_exploded/servlet/GetGamePagesCountServlet", {
            "page": CurrentPageBox.value,
            "email": EmailBox.value,
            "startDate": BeginDate.value,
            "endDate": EndDate.value
        }, (count) => {
            SetMaxPagesCount(count);
            callback();
        });
    }
    function CheckPageButton() {
        $(".page-down-button").css("visibility", "visible");
        $(".page-up-button").css("visibility", "visible");
        if (parseInt(CurrentPageBox.value) >= parseInt(TotalPageLabel.innerHTML.slice(1)))
            $(".page-down-button").css("visibility", "hidden");
        if (parseInt(CurrentPageBox.value) <= 1)
            $(".page-up-button").css("visibility", "hidden");
    };
    function SetPageNumber(number) {
        CurrentPageBox.value = Math.min(GetMaxPagesCount(), Math.max(1, number));
        CheckPageButton();
    }
    UpdateTotalPagesCount(() => { CheckPageButton(); });
    CurrentPageBox.onchange = () => { SetPageNumber(parseInt(CurrentPageBox.value)); };

    function ReloadGames() {
        $.post("/Gomokult_war_exploded/servlet/QueryGamesServlet", {
            "page": CurrentPageBox.value,
            "email": EmailBox.value,
            "startDate": BeginDate.value,
            "endDate": EndDate.value
        }, (games) => {
            let Games = JSON.parse(games);
            let HTML = "", Icons = {"black": "🎃", "white": "❤", "draw": "🐷"};
            for (let i = 0; i < 20; ++i) {
                if (i < Games.length)
                    HTML += `
								<div class="game-card" style="grid-row: ${Math.floor(i / 5) + 1}; grid-column: ${Math.floor(i % 5) + 1};" game-id="${Games[i].gameID}">
									<div class="chessboard-icon fa-solid fa-chess-board fa-5x">
										<div class="game-info game-winner">♥ ${Games[i].likesCount}</div>
										<div class="game-info game-winner-large game-winner-${Games[i].winner}">${Icons[Games[i].winner]}</div>
									</div>
									<div class="game-infos">
										<div class="game-info" title="对局日期">📆 ${FormatDate(new Date(Games[i].date)).split(" ")[0]}</div>
										<div class="game-info" title="对局时间">🕒 ${FormatDate(new Date(Games[i].date)).split(" ")[1]}~${FormatDate(new Date(Games[i].date + 1000 * (Games[i].blackDuration + Games[i].whiteDuration))).split(" ")[1]}</div>
										<div class="game-info" title="黑方玩家">🟤 ${Games[i].userBlack.nickname + "&ensp;".repeat(20)}</div>
										<div class="game-info" title="白方玩家">⚪ ${Games[i].userWhite.nickname + "&ensp;".repeat(20)}</div>
										<div class="game-info" title="落子步数">🔄 共${Games[i].piecesSequence.length}步</div>
									</div>
								</div>
							`;
                else
                    HTML += `
								<div class="game-card" style="visibility: hidden; grid-row: ${Math.floor(i / 5) + 1}; grid-column: ${Math.floor(i % 5) + 1};">
									<div class="chessboard-icon fa-solid fa-chess-board fa-5x">
										<div class="game-info game-winner">♥ 100</div>
										<div class="game-info game-winner-large game-winner-black">⚫</div>
									</div>
									<div class="game-infos">
										<div class="game-info" title="对局日期">📆 2023-07-04</div>
										<div class="game-info" title="对局时间">🕒 13:57~14:02</div>
										<div class="game-info" title="黑方玩家">🟤 Redstone Heart</div>
										<div class="game-info" title="白方玩家">⚪ Redstone Heart</div>
										<div class="game-info" title="落子步数">🔄 共20步</div>
									</div>
								</div>
							`;
            }
            $(".games-grid").html(HTML);
            $(".game-card").click((event) => {
                while (!event.target.classList.contains("game-card"))
                    event.target = event.target.parentNode;
                let GameID = event.target.getAttribute("game-id");
                document.location = `game_viewer.html?game_id=${GameID}`;
            });
        });
    }
    $(".page-down-button").click(() => {
        if (parseInt(CurrentPageBox.value) >= parseInt(TotalPageLabel.innerHTML.slice(1)))
            return;
        else
            CurrentPageBox.value = parseInt(CurrentPageBox.value) + 1;
        CheckPageButton();
        $(".games-grid").removeClass("games-grid-sliding-from-left");
        $(".games-grid").removeClass("games-grid-sliding-from-right");
        $(".games-grid").removeClass("games-grid-sliding-left");
        $(".games-grid").removeClass("games-grid-sliding-right");
        $(".games-grid").addClass("games-grid-sliding-left");
        setTimeout(() => {
            ReloadGames();
            $(".games-grid").removeClass("games-grid-sliding-left");
            $(".games-grid").removeClass("games-grid-sliding-right");
            $(".games-grid").addClass("games-grid-sliding-from-right");

            $(".game-card").click((event) => {
                while (!event.target.classList.contains("game-card"))
                    event.target = event.target.parentNode;
                let GameID = event.target.getAttribute("game-id");
                document.location = `game_viewer.html?game_id=${GameID}`;
            });
        }, 200);
    });
    $(".page-up-button").click(() => {
        if (parseInt(CurrentPageBox.value) <= 1)
            return;
        else
            CurrentPageBox.value = parseInt(CurrentPageBox.value) - 1;
        CheckPageButton();
        $(".games-grid").removeClass("games-grid-sliding-from-left");
        $(".games-grid").removeClass("games-grid-sliding-from-right");
        $(".games-grid").removeClass("games-grid-sliding-left");
        $(".games-grid").removeClass("games-grid-sliding-right");
        $(".games-grid").addClass("games-grid-sliding-right");
        setTimeout(() => {
            ReloadGames();
            $(".games-grid").removeClass("games-grid-sliding-left");
            $(".games-grid").removeClass("games-grid-sliding-right");
            $(".games-grid").addClass("games-grid-sliding-from-left");

            $(".game-card").click((event) => {
                while (!event.target.classList.contains("game-card"))
                    event.target = event.target.parentNode;
                let GameID = event.target.getAttribute("game-id");
                document.location = `game_viewer.html?game_id=${GameID}`;
            });
        }, 200);
    });

    UserButton.onclick = () => { window.location = `user_space.html?user_id=${sessionStorage.getItem("CurrentUser")}`; };
    SearchButton.onclick = () => { ReloadGames(); };
    SelfOnlyButton.onclick = () => {
        EmailBox.value = sessionStorage.getItem("CurrentEmail");
        BeginDate.valueAsDate = new Date("2002/10/10");
        EndDate.valueAsDate = new Date();
        ReloadGames();
    };

    if (window.location.href.split("?").includes("self-only=1"))
        SelfOnlyButton.onclick();
    else
        ReloadGames();
</script>
</body>
</html>
